import React, { useState } from "react";
import { getSubjectsApi } from "@/api";

// 目标需求： 把学科列表的数据使用sessionStorage进行缓存
// 逻辑： 第一次需要该数据的时候，请求，然后把数据存储到sessionStorage中，后面的每次需要使用，都从sessionStorage中获取
// 思路： 1. 获取sessionStorage中的数据 2.判断是否有数据 3.有数据就使用 4.没有数据就请求数据 5.请求回来后把数据存储到sessionStorage中

export default function Subjects() {
  const [list, setList] = useState<any[]>([]);
  const change = () => {
    // 获取
    let data = sessionStorage.getItem("subjects");
    if (data) {
      // 有数据就使用
      setList(JSON.parse(data));
    } else {
      // 没有数据就请求
      getSubjectsApi().then((res) => {
        if (res.errCode === 0) {
          setList(res.data);
          sessionStorage.setItem("subjects", JSON.stringify(res.data));
        }
      });
    }
  };

  return (
    <div>
      <h1 onClick={change}>java</h1>
      <ul>
        {list.map((item) => (
          <li>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}
